<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用flexbox</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="page-user">
		<main class="main">
			<div class="line-item item--user item--only">
				<img class="item-avatar" src="http://coding.imweb.io/img/default-avatar.jpg" width="60" hight="60" alt="">
				<div class="item-bd">
					<p class="item-name">结一</p>
					<p class="item-id">微信号：marvin</p>
				</div>
				<i class="icon-qrcode"></i>
				<i class="icon-v-right"></i>
			</div>
			<ul class="line-list">
				<li class="line-item">
					<i class="item-icon icon--con"></i>
					<p class="item-bd">相册</p>
					<i class="icon-v-right"></i>
				</li>
				<li class="line-item">
				    <i class="item-icon icon--con"></i>
					<p class="item-bd">收藏</p>
					<i class="icon-v-right"></i>
				</li>
				<li class="line-item">
					<i class="item-icon icon--con"></i>
					<p class="item-bd">钱包</p>
					<i class="icon-v-right"></i>
				</li>
				<li class="line-item">
					<i class="item-icon icon--con"></i>
					<p class="item-bd">卡片</p>
					<i class="icon-v-right"></i>
				</li>
			</ul>
			<div class="line-item item--only">
				<i class="item-icon icon--con"></i>
				<p class="item-bd">表情</p>
				<i class="icon-v-right"></i>
			</div>
			<div class="line-item item--only">
				<i class="item-icon icon--con"></i>
				<p class="item-bd">设置</p>
				<i class="icon-v-right"></i>
			</div>
		</main>
		<footer class="footer">
			<nav class="nav">
				<a class="nav-link" href="#">
					<i class="link-icon icon--pic"></i>
					<p class="link-tt">微信</p>
					<i class="icon-corner"></i>
				</a>
				<a class="nav-link" href="#">
					<i class="link-icon icon--pic"></i>
					<p class="link-tt">通讯录</p>
				</a>
				<a class="nav-link" href="#">
					<i class="link-icon icon--pic"></i>
					<p class="link-tt">发现</p>
				</a>
				<a class="nav-link" href="#">
					<i class="link-icon icon--pic"></i>
					<p class="link-tt">我</p>
				</a>
			</nav>
		</footer>
	</div>
</body>
</html>